<template>
  <!-- 辖区管理 -->
  <div class="area-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onSelectTree"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="l-w_content">
          <top-title :updateTime="true" :content="content"></top-title>

          <div class="l-w_c_content">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">所属辖区:</div>
                <!-- show-search -->
                <div class="input-item">
                  <a-select
                    ref="select"
                    allowClear
                    @search="get_all_jurisdiction"
                    v-model="queryParam.jurisdictionId"
                    placeholder="请选择所属辖区"
                  >
                    <a-select-option v-for="(item, index) in jurisdiction_list" :key="index" :value="item.id">
                      {{ item.jurisdictionName }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">房客姓名：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.tenantName" placeholder="请填写房客姓名" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">身份证号：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.tenantIdCard" placeholder="请填写身份证号" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">联系方式：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.tenantMobile" placeholder="请填写联系方式" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">租客类型:</div>
                <div class="input-item">
                  <a-select ref="select" allowClear v-model="queryParam.tenantType" placeholder="请选择租客类型">
                    <!-- <a-select-option v-for="(item, index) in tagList" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option> -->
                    <a-select-option value="1">主租户</a-select-option>
                    <a-select-option value="2">普通租户</a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="btn-wrap">
                <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
                <a-button class="resetBtn" @click="resetHandle()" type="primary"> 重置 </a-button>
              </div>
            </div>

            <div>
              <a-table
                rowKey="id"
                class="tableList"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                @change="handleTableChange"
              >
                <template #sex="record">
                  <span>{{ record.sex == 1 ? '男' : '女' }}</span>
                </template>
                <template #type="record">
                  <span>{{ record.type == 1 ? '主租户' : '普通租户' }}</span>
                </template>
                <template #birth="record">
                  <span>{{ calc_diff_year(record.birth) }}</span>
                </template>
                <template v-slot:action="records">
                  <span class="operation deatil-color" @click="detailsHandle(records)" v-has="'jurisdiction:detail'"
                    >详情
                  </span>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <details-modal ref="detailsModal"></details-modal>
  </div>
</template>

<script>
import detailsModal from './modules/detailsModal'
import startEndTime from '@/components/startEndTime'
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { comMethods } from '@/mixins/comMethods'
import { mapState } from 'vuex'
import moment from 'moment'
import { getAction } from '@/api/manage'

export default {
  name: '',

  components: { startEndTime, detailsModal, leftTree, topTitle },
  mixins: [JeecgListMixin, comMethods],
  data() {
    return {
      url: {
        list: '/rental/house_tenant/join_page',
        tree: true,
      },
      content: [['租客信息']],
      publicVisible: false,
      resetTime: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属辖区',
          dataIndex: 'jurisdictionName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '租客姓名',
          dataIndex: 'rentalHouseTenantName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '性别',
          // dataIndex: 'sex',
          scopedSlots: { customRender: 'sex' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '年龄',
          scopedSlots: { customRender: 'birth' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'mobile',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'idCard',
          width: 200,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '租客类型',
          // dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '工作单位',
          dataIndex: 'workUnit',
          width: 180,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],

      jurisdiction_list: [],
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId(v) {
      this.queryParam.policeAgencyId = v.id ? v.id : ''
      this.searchQuery()
      this.get_all_jurisdiction()
    },
  },

  mounted() {},
  methods: {
    onSelectTree(selectedKeys, info) {
      this.queryParam.policeAgencyId = selectedKeys.length ? selectedKeys[0] : ''
      this.searchQuery()
    },
    searchQuery() {
      this.loadData(1)
      this.resetTime = false
    },
    resetHandle() {
      this.resetTime = true
      this.searchReset()
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.createTime_begin = moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },

    async get_all_jurisdiction(jurisdictionName = '') {
      let {
        result: { records },
      } = await getAction('/police/jurisdiction/list', {
        policeAgencyId: this.queryParam.policeAgencyId,
        pageSize: 999999,
        jurisdictionName,
      })
      this.jurisdiction_list = records
    },

    /**
     * * @description 计算传入时间距离当前有多少年
     * @param {*} startDate
     */
    calc_diff_year(moment) {
      const startDate = this.$moment(moment)
      const currentYear = this.$moment().year()
      const yearsDifference = currentYear - startDate.year()
      return yearsDifference
    },

    detailsHandle(records) {
      this.$refs.detailsModal.show(records)
    },
  },
}
</script>
<style lang="less" scoped>
.area-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
}
</style>
